<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-09 14:59:15
-->
<template>
  <div class="list">
    <!-- 头部 -->
    <Head></Head>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content" v-loading="loading">
      <div class="pic_top">
        <div class="pic">
          <img src="/resources/images/pictu.png" />
          <div class="ban">{{ category.name }}</div>
        </div>
      </div>
      <div class="wrapper">
        <div class="inner_content">
          <div class="left">
            <ul v-for="a in categoryTree" :key="a.id">
              <div v-if="category.id == a.id" :key="a.id">
                <div
                  v-for="b in a.children"
                  :key="b.id"
                  @click="toListHandler(b)"
                >
                  <li>
                    {{ b.name }}
                  </li>
                </div>
              </div>
            </ul>
          </div>
          <div class="right">
            <div class="title">
              {{ category.name }}
            </div>
            <!-- 面包屑 -->
            <div class="nav">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item style="">{{
                  category.name
                }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- /面包屑 -->
            <!-- 文章列表 -->
            <ul>
              <li
                class="article"
                v-for="a in articleData.list"
                @click="toArticleHandler(a)"
                :key="a.id"
              >
                <div>
                  {{ a.title }}
                  <span style="float: right">{{
                    a.publishTime | fmtDate
                  }}</span>
                </div>
              </li>
            </ul>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
              <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total"
              >
              </el-pagination>
            </div>
            <!-- 分页 -->
          </div>
        </div>
      </div>
      <!-- /体部 -->
    </div>
    <!-- 底部 -->
    <Foot></Foot>
    <!-- /底部 -->
  </div>
</template>
<script>
import { get } from "../utils/request";
import Head from "./components/Head";
import Foot from "./components/Foot";
export default {
  components: {
    Head,
    Foot,
  },
  data() {
    return {
      categoryTree: [],
      loading: false,
      category: {},
      param: {
        page: 1,
        pageSize: 10,
      },
      articleData: {
        list: [],
      },
    };
  },
  watch: {
    "$route.query": {
      handler(query) {
        this.category = query;
        this.loadArticles();
      },
      deep: true,
    },
  },
  created() {
    //获取参数
    this.loadCategoryTree();
    this.category = this.$route.query;
    this.loadArticles();
  },
  methods: {
    toListHandler(category) {
      // 跳转
      this.$router.push({
        path: "/list",
        query: category,
      });
    },
    loadCategoryTree() {
      let url = "/index/category/findCategoryTree";
      get(url).then((resp) => {
        this.categoryTree = resp.data;
      });
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles() {
      this.loading = true;
      let url = "/index/article/pageQuery";
      this.param.categoryId = this.category.id;
      get(url, this.param)
        .then((resp) => {
          let data = resp.data;
          this.articleData = data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toArticleHandler(article) {
      this.$router.push({
        path: "/article",
        query: {
          id: article.id,
          name: article.category ? article.category.name : "",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$color_primary: #b39858;
.list {
  .content {
    background-color: #f1efe3;

    min-height: 1000px;

    .pic_top {
      width: 100%;
      .pic {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        img {
          width: 100%;
          border-bottom: 8px solid #8c6301;
        }
        .ban {
          position: absolute;
          left: 0;
          bottom: 95px;
          width: 235px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          color: #fff;
          background: #297470;
          font-size: 20px;
        }
      }
    }
    .inner_content {
      background: #fff;
      padding: 0 10px;
      width: 1050px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      .left {
        width: 20%;
        overflow: hidden;
        float: left;
        .cursor {
          background: #b29957;
        }
        ul li {
          width: 100%;
          line-height: 60px;
          display: block;
          font-size: 16px;
          cursor: pointer;
          border-bottom: 1px solid #9e9e9e;
          text-align: center;
        }
        ul li:hover {
          background-color: #b29957;
        }
      }
      .right {
        flex: 1;
        margin-right: 2em;
        background-color: #fff;
        border-radius: 5px;
        padding: 1em 0.5em;
        min-height: 800px;
        margin-left: 1em;

        .nav {
          border-bottom: 2px solid #cccccc;
          font-size: 14px;
          color: #444444;
          box-sizing: border-box;
          .el-icon-arrow-right {
            float: right;
            line-height: 1;
          }
        }
        ul > li.article {
          padding: 1em 0;
          border-bottom: 1.5px solid #ececec;
          cursor: pointer;
          & > div {
            line-height: 1.5em;
          }
        }
        li:hover {
          color: $color_primary;
        }

        .title {
          padding: 1em 1em;
          font-size: 20px;
          color: #2b6f6b;
        }
        .page {
          padding: 1.5em 0;
          text-align: center;
        }
      }
    }
  }
}
</style>